<template>
	<view v-if="vuex_isMobile" class="content-expert-m">
		<view class="title">
			专家介绍
		</view>
		<view class="content-expert-list">
			<view class="content-expert-list-item" v-for="(item, index) in expertList" :key="index"
				@click="toDetail(item)">
				<image :src="item.thumb" mode="" style="width: 270px;height: 378px;"></image>
				<view class="content-expert-list-item-name">
					{{item.name}}
				</view>
			</view>
		</view>
		<cc-listPageView :totalNum="totalNum" :pageCount="queryForm.pageSize" :curPageNum="queryForm.pageNo"
			:beishu="1.8" @pageClick="pageClick">
		</cc-listPageView>
	</view>
	<view v-else class="content-expert">
		<view class="title">
			专家介绍
		</view>
		<view class="content-expert-search">
			<view class="content-expert-search-item content-expert-search-item1">
				<view class="content-expert-search-item-label">
					姓名
				</view>
				<view class="content-expert-search-item-input">
					<input v-model="queryForm.name" placeholder="请输入专家姓名" />
				</view>
			</view>
			<view class="content-expert-search-item">
				<view class="content-expert-search-item-label1">
					科室
				</view>
				<cus-selects :closeSelect.sync='close' v-model="queryForm.deptId" :data="deptList" :clearable='true'
					:filterable='true' :searchType='1' :valueType="{
						label:'text',
						value:'value'
					}"></cus-selects>
			</view>
			<view class="content-expert-search-item">
				<view class="content-expert-search-item-label1">
					职称
				</view>
				<cus-selects :closeSelect.sync='close' v-model="queryForm.jobTitles" :data="zhicList" :clearable='true'
					:filterable='true' :searchType='1' :valueType="{
						label:'text',
						value:'value'
					}"></cus-selects>
			</view>
			<view class="content-expert-search-item">
				<view class="content-expert-search-btn" @click="requestData()">
					检索
				</view>
			</view>
		</view>
		<view class="content-expert-list">
			<view class="content-expert-list-item" v-for="(item, index) in expertList" :key="index"
				@click="toDetail(item)">
				<image :src="item.thumb" mode="" style="width: 216px;height: 264px;"></image>
				<view class="content-expert-list-item-name">
					{{item.name}}
				</view>
				<view class="content-expert-list-item-tags">
					<view class="content-expert-list-item-tag">
						{{item.deptName}}
					</view>
					<view class="content-expert-list-item-tag">
						{{item.jobTitleName}}
					</view>
				</view>
			</view>
		</view>
		<cc-listPageView :totalNum="totalNum" :pageCount="queryForm.pageSize" :curPageNum="queryForm.pageNo" :beishu="1"
			@pageClick="pageClick">
		</cc-listPageView>
	</view>
</template>

<script>
	import {
		getDeptExpert,
		getDictList,
		getDeptList,
	} from "@/common/api.js";
	import cusSelects from '@/components/cus-selects-fan/cus-selects-fan.vue'
	export default {
		components: {
			cusSelects
		},
		data() {
			return {
				queryForm: {
					menuId: '',
					pageSize: 9,
					pageNo: 1,
					name: '',
					deptId: '',
					jobTitles: ''
				},
				totalNum: 0,
				deptList: [],
				zhicList: [],
				expertList: []
			}
		},
		onLoad() {

		},
		methods: {
			getInfo(id) {
				this.queryForm.menuId = id
				this.requestData()
				getDictList({
					dictType: 'cms_expert_job_title'
				}).then(res => {
					this.zhicList = res.data.map(item => {
						return {
							text: item.label,
							value: item.label,
						}
					})
				})
				getDeptList({
					menuId: 12
				}).then(res => {
					let deptList = []
					res.data.map(item => {
						item.cmsContentDeptList.map(item => {
							deptList.push({
								text: item.name,
								value: item.id,
							})
						})
					})
					this.deptList = deptList
				})

			},
			requestData() {
				getDeptExpert(this.queryForm).then(res => {
					this.expertList = res.data.list
					this.totalNum = res.data.total
				})
			},
			toDetail(item) {
				uni.navigateTo({
					url: '/pages/expert-detail?active=2' + '&id=' + item.id,
				})
			},
			pageClick(tag) {
				if (tag === 0) {
					// 上一页 (不等于第一页)
					if (this.queryForm.pageNo > 1) {

						this.queryForm.pageNo--;
						this.requestData();
					}
				} else {
					// 下一页 (不等于最后一页)
					if (this.totalNum > (this.queryForm.pageNo * this.queryForm.pageSize)) {
						this.queryForm.pageNo++;
						this.requestData();
					}

				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content-expert-m {
		padding: 0 79px;

		.title {
			width: 100%;
			font-weight: 500;
			text-align: center;
			line-height: 104px;
			font-size: 72px;
			color: $maincolor;
			margin-bottom: 72px;
		}

		.content-expert-list {
			display: flex;
			flex-wrap: wrap;

			.content-expert-list-item {
				margin-right: 20px;
				margin-bottom: 36px;

				.content-expert-list-item-name {
					font-weight: 400;
					font-size: 43px;
					color: #434343;
					line-height: 63px;
					text-align: center;
					margin-top: 14px;
				}
			}
		}
	}

	.content-expert {
		.title {
			width: 100%;
			font-weight: 500;
			text-align: center;
			line-height: 80px;
			font-size: 24px;
			color: $maincolor;
		}

		.content-expert-search {
			display: flex;

			.content-expert-search-item1 {
				margin-top: -10px;
				display: flex;
				align-items: center;
			}

			.content-expert-search-item {
				display: flex;
				align-items: center;
				margin-right: 20px;

				.content-expert-search-item-label {
					margin-right: 16px;
					font-weight: 400;
					font-size: 14px;
					color: #686868;
				}

				.content-expert-search-item-label1 {
					margin-right: 16px;
					font-weight: 400;
					font-size: 14px;
					color: #686868;
					margin-bottom: 5px;
				}

				.content-expert-search-item-input {
					padding: 8px 10px;
					border: 1px solid #EAEAEA;
				}

				.content-expert-search-btn {
					width: 80px;
					background: #193F93;
					font-weight: 400;
					font-size: 14px;
					color: #FFFFFF;
					line-height: 40px;
					text-align: center;
					margin-top: -10px;
				}
			}
		}

		.content-expert-list {
			display: flex;
			flex-wrap: wrap;
			padding: 40px 50px;

			.content-expert-list-item {
				cursor: pointer;
				position: relative;
				margin-right: 25px;
				margin-bottom: 20px;

				.content-expert-list-item-name {
					position: absolute;
					left: 18px;
					bottom: 44px;
					font-weight: 500;
					font-size: 16px;
					color: #FFFFFF;
					line-height: 21px;
				}

				.content-expert-list-item-tags {
					position: absolute;
					left: 18px;
					bottom: 16px;
					display: flex;

					.content-expert-list-item-tag {
						line-height: 20px;
						font-weight: 400;
						font-size: 12px;
						color: #FFFFFF;
						padding: 0 8px;
						margin-right: 8px;
						background: #193F93;
					}
				}
			}
		}
	}

	::v-deep.uni-input-wrapper {
		width: 160px;
		border: 1px solid #EAEAEA;
		padding: 6px 16px;

		.uni-input-placeholder {
			left: 16px;
			font-weight: 400;
			font-size: 14px;
			color: #BBBBBB;
			line-height: 19px;
		}
	}

	::v-deep uni-input {
		overflow: unset;
	}
</style>